var map, confirmMap;
var markers = new Array();
var markersRuta = new Array();
var MAX_MARKERS = 99;

$(function() {
    var myLatlng = new google.maps.LatLng(-34.619, -58.46);

    var myOptions = {
        zoom: 12,
        center: myLatlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    map = new google.maps.Map(document.getElementById("mapa"), myOptions);

    //plotear();

    crearModalGenerarRuta('windowConfirmarRuta', 'buttonGenerarRuta');
    $('#buttonGenerarRuta').click(function() {
        generarRuta('windowConfirmarRuta');
    });
});

function plotear() {
    $("#loading-subsidios").fadeIn(500);
    var marker;

    for (var i in markers) {
        markers[i].setMap(null);
    }

    markers = new Array();

    var codigo_trata = $("#codigo_trata").val();
    var comuna = $("#comuna").val();
    var barrio = $("#barrio").val();
    var calle = $("#calle").val();
    var altura = $("#altura").val();

    var data = sync_request("GENERAR_PLOTEO", "getCoordenadas", '{"codigo_trata":"' + codigo_trata + '", "calle":"' + calle + '", "altura":"' + altura + '", "comuna":"' + comuna + '", "barrio":"' + barrio + '"}');
    $("#loading-subsidios").fadeOut(500, function() {
        if (empty(data)) {
            jAlert('No se encontraron subsidios.', 'Alerta');
        }
    });

    for (var i in data) {
        marker = new google.maps.Marker({
            id: data[i]['id'],
            domicilio: data[i]['domicilio'],
            map: map,
            title: data[i]['domicilio'],
            position: new google.maps.LatLng(data[i]['coordenadas'][0], data[i]['coordenadas'][1])
        });
        markers.push(marker);
    }
}

function getMarkersCurrentViewport() {
    var array = new Array();
    var bounds = map.getBounds();
    for (var i in markers) {
        if (bounds.contains(markers[i].getPosition())) {
            array.push(markers[i]);
        }
    }
    return array;
}

function generarRuta(modal_id) {
    var marker;
    var modal = $("[id='" + modal_id + "']");
    var width = 640; // var width = screen.width * 0.45;
    var height = 500; // var height = screen.height * 0.63;
    var html = '';

    var markers = getMarkersCurrentViewport();

    html += '<div class="column">';
    html += '<div id="mapaConfirmarRuta" style="width: ' + width + 'px; height: ' + height + 'px;"></div>';
    html += '</div>';
    html += '<div class="column">';
    html += '<div><h3>Domicilios de la Ruta (<span id="ul_length">' + markers.length + '</span>)</h3></div>';
    html += '<ul>';
    for (var i in markers) {
        html += '<li id="li_' + markers[i].id + '">' + markers[i].domicilio + '</li>';
    }
    html += '</ul>';
    html += '<div id="boxButtonConfirmarRuta">';
    html += '<div><b>Encargado:</b> <input type="text" id="rutaEncargado" /></div>';
    html += '<div><b>Información:</b> <br /><textarea id="rutaInformacion"></textarea></div>';
    html += '<div><a href="javascript:void(0);" class="k-button" id="buttonConfirmarRuta"><span class="k-icon k-i-tick"></span>Confirmar Ruta</a></div>';
    html += '</div>';
    html += '</div>';

    modal.html(html);
    modal.data("kendoWindow").center().open();

    var myOptions = {
        zoom: map.getZoom(),
        center: map.getCenter(),
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        disableDoubleClickZoom: true,
        draggable: false,
        disableDefaultUI: true,
        panControl: false,
        rotateControl: false,
        scaleControl: false,
        scrollwheel: false,
        zoomControl: false
    };
    confirmMap = new google.maps.Map(document.getElementById("mapaConfirmarRuta"), myOptions);

    for (var i in markers) {
        var marker = new google.maps.Marker({
            key: i,
            map: confirmMap,
            position: markers[i].getPosition(),
            id: markers[i].id,
            domicilio: markers[i].domicilio,
            title: markers[i].title
        });
        markersRuta[i] = marker;

        google.maps.event.addListener(marker, 'click', function() {
            var event = this;
            jConfirm('¿Confirma eliminar el domicilio "' + this.domicilio + '" de la ruta?', 'Confirmación', function(r) {
                if (r) {
                    $('#li_' + event.id).remove();
                    $('#ul_length').text(parseInt($('#ul_length').text()) - 1);
                    markersRuta[event.key].setMap(null);
                    markersRuta[event.key] = null;
                    //markersRuta.splice(event.key, 1);
                }
            });
        });
    }

    $('#buttonConfirmarRuta').click(function() {
        var cant = 0;

        for (var i in markersRuta) {
            if (markersRuta[i] !== null) {
                cant++;
            }
        }

        if (cant == 0) {
            jAlert('Debe especificar al menos un domicilio para generar la ruta.', 'Alerta');
            return;
        }


        if (cant > MAX_MARKERS) {
            jAlert('Puede especificar un máximo de ' + MAX_MARKERS + ' domicilios por ruta.', 'Alerta');
            return;
        }

        jConfirm('¿Confirma generar una ruta con los domicilios indicados?', 'Confirmación', function(r) {
            if (r) {
                var ids = new Array();
                for (var i in markersRuta) {
                    if (markersRuta[i] !== null) {
                        ids.push(markersRuta[i].id);
                    }
                }

                var data = sync_request("GENERAR_PLOTEO", "confirmarRuta", '{"centro":"' + confirmMap.getCenter() + '", "zoom":"' + confirmMap.getZoom() + '", "encargado":"' + $("#rutaEncargado").val() + '", "informacion":"' + $("#rutaInformacion").val() + '", "markers":' + JSON.stringify(ids) + '}');
                if (data.status == "OK") {
                    window.location = WWW + 'rutas';
                }
                else {
                    modal.data("kendoWindow").close();
                    jAlert('Se produjo un error creando la ruta, intente nuevamente.', 'Alerta');
                }
            }
        });
    });

}

function crearModalGenerarRuta(modal_id, button_id) {
    var modal = $("[id='" + modal_id + "']");
    var width = 1000; // var width = screen.width * 0.70;
    var height = 520; // var height = screen.height * 0.65;

    modal.kendoWindow({
        width: width + "px",
        height: height + "px",
        title: "Confirmar Ruta",
        actions: ["Maximize", "Close"],
        iframe: false,
        modal: true,
        visible: false,
        show: "fadeIn",
        hide: "fadeOut"
    });
}